<template>
  <el-row :gutter="10" class="dataPanel" type="flex" justify="space-between">
    <template v-if="dataObj.styleClass == 1 || !dataObj.styleClass">
      <el-col class="dataPanel-item" v-for="(item, i) in realList" :key="i">
        <el-card shadow="never" :class="'card_style' + (i % 4)">
          <div class="dataPanel-body">
            <div class="dataPanel-body_title">
              <span class="title">{{ item.fullName }}</span>
            </div>
            <div class="dataPanel-body_number">
              <span class="number">{{ dataSet[item.field] }}</span>
              <img
                v-if="i % 4 == 0"
                src="@/assets/images/dataPanelBule.png"
                alt=""
              />
              <img
                v-if="i % 4 == 1"
                src="@/assets/images/dataPanelYellow.png"
                alt=""
              />
              <img
                v-if="i % 4 == 2"
                src="@/assets/images/dataPanelGreen.png"
                alt=""
              />
              <img
                v-if="i % 4 == 3"
                src="@/assets/images/dataPanelRed.png"
                alt=""
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </template>
    <template v-if="dataObj.styleClass == 2">
      <el-col class="dataPanel-item" v-for="(item, i) in realList" :key="i">
        <el-card shadow="never" :class="'card_style_2_' + (i % 4)">
          <div class="dataPanel-body">
            <div class="dataPanel-body_title">
              <span :class="'title_icon title_icon' + (i % 3)">
                <span class="title_icon_1"></span>
              </span>
              <span class="title">{{ item.fullName }}</span>
            </div>
            <div class="dataPanel-body_number">
              <span class="number">{{ dataSet[item.field] }}</span>
              <span class="unit">{{ item.unit }} </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </template>
    <div v-if="dataObj.styleClass == 3" style="width: 100%">
      <div class="module_title">
        <span class="module_title_name">{{ dataObj.title }} ></span>
      </div>
      <div class="dataPanel_div">
        <div v-for="(item, i) in realList" :key="i" class="dataPanel-item_3">
          <div class="style_3_img" style="display: inline-block">
            <img
              v-if="i % 4 == 0"
              src="@/assets/images/dataPanel_3_1.png"
              alt=""
            />
            <img
              v-if="i % 4 == 1"
              src="@/assets/images/dataPanel_3_2.png"
              alt=""
            />
            <img
              v-if="i % 4 == 2"
              src="@/assets/images/dataPanel_3_3.png"
              alt=""
            />
            <img
              v-if="i % 4 == 3"
              src="@/assets/images/dataPanel_3_4.png"
              alt=""
            />
          </div>
          <div class="style_3_num" style="display: inline-block">
            <p>{{ item.fullName }}</p>
            <p class="style_3_num_number">
              {{ dataSet[item.field] }}
              <span style="font-size: 12px">{{ item.unit }}</span>
            </p>
          </div>
        </div>
        <!-- <el-col class="dataPanel-item_3" v-for="(item, i) in realList" :key="i">
          <el-card shadow="never" :class="'card_style_2_' + (i % 4)">
            {{ item.fullName }}
          </el-card>
        </el-col> -->
      </div>
    </div>
  </el-row>
</template>
<script>
import { mapGetters } from "vuex";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import request from "@/utils/request";
export default {
  props: {
    title: { type: String, default: "" },
    dataObj: { default: null },
    list: { type: Array, default: () => [] },
    searchForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      realList: [],
      dataSet: {},
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    if (this.dataObj.isDataSet || this.dataObj.dataType == "service") {
      this.getDataSet();
    }
    this.dealData();
  },
  watch: {
    list: {
      handler(val) {
        this.dealData();
      },
      deep: true,
    },
  },
  methods: {
    dealData() {
      let list = JSON.parse(JSON.stringify(this.list));
      for (let i = 0; i < list.length; i++) {
        if (list[i].dataType === "dynamic") {
          list[i].num = "";
          if (!list[i].propsApi) continue;
          getDataInterfaceRes(list[i].propsApi).then((res) => {
            list[i].num = res.data.data;
          });
        }
      }

      this.realList = list;
    },
    getDataSet() {
      let paramObj = this.dataObj.requestParam
        ? JSON.parse(this.dataObj.requestParam)
        : {};
      for (const key in paramObj) {
        if (key == "companyId") {
          paramObj.companyId = this.userInfo.organizeId;
        }
      }
      for (const key in this.searchForm) {
        paramObj[key] = this.searchForm[key];
      }

      console.log("paramObj------2", paramObj);
      request({
        url: this.dataObj.interfaceUrl,
        method: this.dataObj.customUrlPostType,
        data: paramObj ? paramObj : {},
      }).then((res) => {
        this.dataSet = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.dataPanel {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  padding: 10px;
  margin: 0 !important;
  .dataPanel-item {
    height: 100%;
    border-radius: 10px;
  }

  >>> .card_style0 {
    background: linear-gradient(180deg, #eaf1ff 0%, #f9fbff 100%);
  }
  >>> .card_style1 {
    background: linear-gradient(180deg, #fff5e4 0%, #fffcf7 100%);
  }
  >>> .card_style2 {
    background: linear-gradient(180deg, #eaf1ff 0%, #f9fbff 100%);
  }
  >>> .card_style3 {
    background: linear-gradient(180deg, #fdf5f5 0%, #fffefe 100%);
  }
  >>> .el-card {
    width: 100%;
    height: 100%;
    border: none !important;
    .el-card__body {
      padding: 0;
      height: 100%;
    }
  }
  .dataPanel-body {
    padding: 20px 16px;
    position: relative;
    .dataPanel-body_title {
      .title_icon0 {
        background-color: var(--blue);
      }
      .title_icon1 {
        background-color: var(--orange);
      }
      .title_icon2 {
        background-color: var(--purple);
      }
      .title_icon {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 15px;
        text-align: center;
        position: relative;
        // top: -1px;
        margin-right: 10px;
      }
      .title_icon_1 {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #ffffff;
        // margin-top: 3.5px;
        position: absolute;
        top: 3.5px;
        left: 3.5px;
      }
      .title {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #606266;
        line-height: 20px;
      }
    }
    .dataPanel-body_number {
      margin-top: 25px;
      .unit {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
      }
      .number {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 36px;
        color: #000000;
        line-height: 36px;
        position: relative;
        // top: 10px;
        z-index: 2;
      }
      img {
        position: absolute;
        right: 19px;
        z-index: 1;
      }
    }
  }
  .card_style_2_0,
  .card_style_2_1,
  .card_style_2_2,
  .card_style_2_3,
  .card_style_2_4,
  .card_style_2_5 {
    border: 1px solid #efefef !important;
  }
  .module_title_name {
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 24px;
    padding: 0 10px;
  }
  .dataPanel_div {
    display: block;
    width: 100%;
    padding: 0 10px;
    overflow: hidden;
    .dataPanel-item_3 {
      float: left;
      font-size: 14px;
      width: calc(50% - 10px);
      height: 100px;
      margin-right: 20px;
      padding: 20px;
      border: 1px solid #efefef !important;
      margin-top: 15px;
    }
    .dataPanel-item_3:nth-child(2n) {
      margin-right: 0px;
    }
  }
  .style_3_num {
    float: left;
    margin-left: 10px;
    line-height: 26px;
    // margin-top: 10px;
    .style_3_num_number {
      font-size: 22px;
      color: #1d2129;
    }
  }
  .style_3_img {
    float: left;
  }
  // .dataPanel-body {
  //   padding-left: 30px;
  //   height: 100%;
  //   display: flex;
  //   align-items: center;
  //   .dataPanel-body-item {
  //     width: 66px;
  //     height: 66px;
  //     margin-right: 16px;
  //     border-radius: 50%;
  //     text-align: center;
  //     line-height: 66px;
  //     font-size: 36px;
  //     flex-shrink: 0;
  //     &.dataPanel-body-item1 {
  //       background: #f2ebfb;
  //       color: #7b1ae1;
  //     }
  //     &.dataPanel-body-item2 {
  //       background: #edf8fe;
  //       color: #4ab8ff;
  //     }
  //     &.dataPanel-body-item3 {
  //       background: #fff7e4;
  //       color: #ff8b58;
  //     }
  //     &.dataPanel-body-item4 {
  //       background: #fff2f5;
  //       color: #fc5b87;
  //     }
  //     &.dataPanel-body-item5 {
  //       background: rgba(51, 185, 50, 0.1);
  //       color: #33b932;
  //     }
  //     &.dataPanel-body-item6 {
  //       background: rgba(255, 59, 59, 0.1);
  //       color: #ff3b3b;
  //     }
  //   }
  //   .text {
  //     display: inline-block;
  //     height: 56px;
  //     .num {
  //       font-size: 20px;
  //       line-height: 36px;
  //       height: 36px;
  //     }
  //     .name {
  //       font-size: 14px;
  //       color: #666;
  //     }
  //   }
  // }
}
</style>
